<template>
	<view class="coach-edit">
		<!-- 展示不可编辑字段 -->
		<view class="item noedit">
			<text class="label">姓名：</text><text class="txt">{{ form.coach_name }}</text>
		</view>
		<view class="item noedit">
			<text class="label">手机号：</text><text class="txt">{{ form.coach_mobile }}</text>
		</view>

		<!-- 可编辑项 -->
		<view class="item flex">
			<text class="label">头像：</text>
			<image :src="web_url + form.avatar" class="avatar" mode="aspectFill" @click="chooseImage('avatar')" />
			<button class="upload-btn" size="mini" @click="chooseImage('avatar')">更换</button>
		</view>

		<view class="item">
			<text class="label">年龄：</text>
			<input v-model="form.coach_age" type="number" placeholder="请输入年龄" class="inp"
				placeholder-style="color:#aaa" />
		</view>

		<view class="item">
			<text class="label">专业特长：</text>
			<input v-model="form.talent" placeholder="请输入专业特长" class="inp" placeholder-style="color:#aaa" />
		</view>

		<view class="item">
			<text class="label">教学特色：</text>
			<input v-model="form.trait" placeholder="请输入教学特色" class="inp" placeholder-style="color:#aaa" />
		</view>

		<view class="item">
			<text class="label">工作经历：</text>
			<textarea v-model="form.work" class="inp" placeholder="请输入工作经历" placeholder-style="color:#aaa" />
		</view>

		<view class="item">
			<text class="label">教育经历：</text>
			<textarea v-model="form.teach" class="inp" placeholder="请输入教育经历" placeholder-style="color:#aaa" />
		</view>

		<view class="item">
			<text class="label">资格证书：</text>
			<view class="img-list">
				<view class="img-wrap" v-for="(img, idx) in form.prove_images" :key="idx">
					<image :src="web_url + img" class="img" />
					<text class="del-btn" @click="removeProveImage(idx)">×</text>
				</view>
				<button class="upload-btn" size="mini" @click="chooseMultiImage('prove_images', 5)">上传</button>
			</view>
		</view>

		<view class="item">
			<text class="label">教学照片：</text>
			<view class="img-list">
				<view class="img-wrap" v-for="(img, idx) in form.teach_images" :key="idx">
					<image :src="web_url + img" class="img" />
					<text class="del-btn" @click="removeTeachImage(idx)">×</text>
				</view>
				<button class="upload-btn" size="mini" @click="chooseMultiImage('teach_images', 6)">上传</button>
			</view>
		</view>

		<view class="item">
			<text class="label">教学视频：</text>
			<view class="video-list">
				<view class="video-wrap" v-for="(v, idx) in form.teach_videos" :key="idx">
					<video :src="web_url + v" class="video" controls />
					<text class="del-btn" @click="removeTeachVideo(idx)">×</text>
				</view>
				<button class="upload-btn" size="mini" @click="chooseTeachVideo">上传</button>
			</view>
		</view>

		<button class="submit-btn" @click="submit">保存修改</button>
	</view>
</template>

<script>
	import uploads from '@/util/upload.js'
	const webConfig = require("@/util/config");
	export default {
		data() {
			return {
				form: {
					id: '',
					coach_name: '',
					coach_mobile: '',
					avatar: '',
					coach_age: '',
					talent: '',
					trait: '',
					work: '',
					teach: '',
					prove_images: [],
					teach_images: [],
					teach_videos: []
				},
				web_url: ''
			}
		},
		onLoad() {
			this.getCoachInfo()

			this.web_url = webConfig.base_url || '';

		},
		methods: {
			getCoachInfo() {
				this.$http({
					url: "/addons/xilufitness/coach/getCoach",
					method: "get"
				}).then(res => {
					let info = res.data.info || {};
					this.form.id = info.id || '';
					this.form.coach_name = info.coach_name || '';
					this.form.coach_mobile = info.coach_mobile || '';
					this.form.avatar = info.coach_avatar || '';
					this.form.coach_age = info.coach_age || '';
					this.form.talent = info.talent || '';
					this.form.trait = info.trait || '';
					this.form.work = info.work || '';
					this.form.teach = info.teach || '';
					this.form.prove_images = Array.isArray(info.prove_images) ? info.prove_images : (info
						.prove_images ? info.prove_images.split(',') : []);
					this.form.teach_images = Array.isArray(info.teach_images) ? info.teach_images : (info
						.teach_images ? info.teach_images.split(',') : []);
					this.form.teach_videos = Array.isArray(info.teach_videos) ? info.teach_videos : (info
						.teach_videos ? info.teach_videos.split(',') : []);
				});
			},
			removeProveImage(index) {
				this.form.prove_images.splice(index, 1);
			},
			removeTeachImage(index) {
				this.form.teach_images.splice(index, 1);
			},
			removeTeachVideo(index) {
				this.form.teach_videos.splice(index, 1);
			},
			chooseImage(field) {
				let _this = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						let tempPath = res.tempFilePaths[0];
						uploads.uploadFile(tempPath, function(uploadRes) {
							uni.hideLoading();
							if (uploadRes.code == 1) {
								_this.form[field] = uploadRes.data.url;
							} else {
								uni.showToast({
									title: uploadRes.msg || '上传失败',
									icon: 'none'
								});
							}
						});
					}
				});
			},
			chooseMultiImage(field, max) {
				let _this = this;
				let left = max - _this.form[field].length;
				if (left <= 0) {
					uni.showToast({
						title: `最多上传${max}张`,
						icon: 'none'
					});
					return;
				}
				uni.chooseImage({
					count: left,
					success(res) {
						let tempFiles = res.tempFilePaths;
						// 依次上传
						tempFiles.forEach(tempPath => {
							uploads.uploadFile(tempPath, function(uploadRes) {
								uni.hideLoading();
								if (uploadRes.code == 1) {
									_this.form[field].push(uploadRes.data.url);
								} else {
									uni.showToast({
										title: uploadRes.msg || '上传失败',
										icon: 'none'
									});
								}
							});
						});
					}
				});
			},
			removeImage(field, idx) {
				this.form[field].splice(idx, 1);
			},
			chooseTeachVideo() {
				let _this = this;
				if (this.form.teach_videos.length >= 5) {
					uni.showToast({
						title: '最多上传5个视频',
						icon: 'none'
					});
					return;
				}
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: (res) => {
						let tempPath = res.tempFilePath;
						uni.showLoading({
							title: '上传中'
						});
						uploads.uploadFile(tempPath, function(uploadRes) {
							uni.hideLoading();
							if (uploadRes.code == 1) {
								_this.form.teach_videos.push(uploadRes.data.url);
							} else {
								uni.showToast({
									title: uploadRes.msg || '上传失败',
									icon: 'none'
								});
							}
						});
					}
				});
			},
			removeVideo(idx) {
				this.form.teach_videos.splice(idx, 1);
			},
			submit() {
				this.$http({
					url: "/addons/xilufitness/coach/edCoach",
					method: "post",
					data: {
						id: this.form.id,
						coach_age: this.form.coach_age,
						talent: this.form.talent,
						trait: this.form.trait,
						work: this.form.work,
						teach: this.form.teach,
						prove_images: this.form.prove_images.join(','),
						teach_images: this.form.teach_images.join(','),
						teach_videos: this.form.teach_videos.join(','),
						avatar: this.form.avatar
					}
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				});
			}
		}
	}
</script>
<style scoped>
	.img-list,
	.video-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.img-wrap,
	.video-wrap {
		position: relative;
		margin-right: 16rpx;
		margin-bottom: 8rpx;
	}

	.img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		background: #fff;
		border: 1rpx solid #E8EEFE;
	}

	.video {
		width: 220rpx;
		height: 140rpx;
		border-radius: 8rpx;
		background: #fff;
	}

	.del-btn {
		position: absolute;
		right: 2rpx;
		top: 2rpx;
		width: 36rpx;
		height: 36rpx;
		line-height: 36rpx;
		background: rgba(30, 30, 30, 0.8);
		color: #f55;
		border-radius: 50%;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		z-index: 2;
		box-shadow: 0 2rpx 8rpx #111;
	}

	.coach-edit {
		background: #E8EEFE;
		min-height: 100vh;
		padding: 32rpx 24rpx 100rpx 24rpx;
	}

	.item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 36rpx;
		border-bottom: 1rpx solid #222;
		padding-bottom: 16rpx;
	}

	.noedit {
		border-bottom: none;
		color: #aaa;
	}

	.label {
		color: grey;
		width: 160rpx;
		font-size: 30rpx;
		flex-shrink: 0;
	}

	.txt {
		color: #333;
		font-size: 30rpx;
	}

	.inp {
		background: #fff;
		color: #333;
		border-radius: 8rpx;
		padding: 16rpx;
		font-size: 28rpx;
		border: 1rpx solid #E8EEFE;
		flex: 1;
		margin-left: 12rpx;
		box-sizing: content-box;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 2rpx solid #fff;
		margin-right: 16rpx;
	}

	.img-list,
	.video-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		margin-right: 16rpx;
		margin-bottom: 8rpx;
		border: 1rpx solid #E8EEFE;
		background: #fff;
	}

	.video {
		width: 220rpx;
		height: 140rpx;
		margin-right: 16rpx;
		margin-bottom: 8rpx;
		border-radius: 8rpx;
		background: #fff;
	}

	.upload-btn {
		background: #fff;
		color: #ffcf00;
		border: 1rpx solid #E8EEFE;
		border-radius: 10rpx;
		padding: 8rpx 20rpx;
		margin-left: 0;
		margin-top: 8rpx;
		font-size: 24rpx;
	}

	.submit-btn {
		width: 100%;
		background: linear-gradient(90deg, #e95950 0%, #f5b96b 100%);
		color: #fff;
		font-size: 32rpx;
		padding: 22rpx 0;
		border-radius: 32rpx;
		margin-top: 48rpx;
		letter-spacing: 3rpx;
		box-shadow: 0 6rpx 36rpx #e9595030;
		border: none;
	}
</style>